<script setup>
import router from "../../../router/index.js";
import {ref} from "vue";
import request9191 from "../../../utils/request9191.js";
import {ElMessage} from "element-plus";

//社团活动数组
const clubActivity = ref([])

const getClubActivity = ()=>{
  request9191({
    url: '/clubActivity/getAll',
    method: 'get'
  }).then((res) =>{
    console.log(res.data.data)
    clubActivity.value=res.data.data
  })
}
//清空数据
const clearJoinInfo = () =>{
  joinActivityForm.value.actName=''
  joinActivityForm.value.actClub=''
  joinActivityForm.value.sname=''
  joinActivityForm.value.snumber=''
  joinActivityForm.value.sclass=''
}

//申请加入活动
const tk = ref(false)
const formLabelWidth = '140px'
const joinActivityForm = ref({
  actName:'',
  actClub:'',
  sname:'',
  snumber:'',
  sclass:''
})

//申请加入活动校验
const joinActivityFormRules = ref({
  sname:[
    {required: true, message: "请输入您的姓名", trigger: "blur"}
  ],
  sclass:[
    {required: true, message: "请输入您的班级名称", trigger: "blur"}
  ],
  snumber:[
    {required: true, message: "请输入您的学号", trigger: "blur"}
  ]
})

const addPeople = () =>{
      request9191({
        url: '/ClubActReg/addPeople',
        method:'post',
        data:joinActivityForm.value
      }).then((res)=>{
        ElMessage.success("提交成功")
        tk.value=false
        clearJoinInfo()
      }).catch(()=>{
        ElMessage({
          type:'info',
          message:'已取消'
        })
      })
}

const open =(actName , actClub , status) =>{
  if(sessionStorage.getItem("name") === null){
    ElMessage.error("请先登录")
    return
  }
  if (status===1){
    joinActivityForm.value.actName=actName
    joinActivityForm.value.actClub=actClub
    tk.value=true
  }
}
//全局变量ID
const nowId = ref()
//查看当前活动的所有评论
const review = ref([])
const getRewview = (id) =>{
  if (sessionStorage.getItem("name") === null){
    ElMessage.error("请先登录")
    return
  }
  nowId.value=id
  request9191({
    url: '/review/getById',
    method: 'get',
    params:{
      actId: id
    }
  }).then((res) =>{
    if (res.data.data.length===0){
      review.value=""
      ElMessage.info("暂无评论,快来评论吧~")
    }else {
      review.value = res.data.data
    }

  })
}
//文本域
const sendReview = ref({
  sName:'',
  actId:'',
  content:''
})
//发布评论
const addReview = () =>{
  request9191({
    url: '/review/addReview',
    method: 'post',
    data:{
      sname:sessionStorage.getItem("name"),
      actId:nowId.value,
      content:sendReview.value.content
    }
  }).then((res)=>{
    ElMessage.success("评论成功")
    getRewview(nowId.value)
  })
}

//清空文本域
const clearReview = () =>{
  sendReview.value.content=''
}

// 敏感词
const sensitiveWords = ref(['敏感词1', '敏感词2']); // 添加或修改敏感词
// 敏感词校验
const validateSensitiveWords = (rule, value, callback) => {
  const foundWord = sensitiveWords.value.find(word => value.includes(word));
  if (foundWord) {
    callback(new Error(`公告内容不能包含敏感词：“${foundWord}”`));
  } else {
    callback();
  }
};
// 表单校验
const rules = {
  context: [
    { required: true, message: '公告内容不能为空', trigger: 'blur' },
    { validator: validateSensitiveWords, trigger: 'blur' }
  ]
};
getClubActivity()
</script>

<template>
  <div class="userActivityAll">
    <div class="top" style="display: flex">
      <div class="top-left">
        <img src="../../../assets/recreation/logo.png" style="height: 170px; width: 300px;
margin-right: 100px;"  alt="">
      </div>
      <div class="top-right">
        <ul style="display: flex">

            <li @click="router.push('/recreationClubStart')">首页</li>
            <li @click="router.push('/userclub')">活力社团</li>
            <li @click="router.push('/userActivity')">社团活动</li>
            <li @click="router.push('/userRules')">规章制度</li>


        </ul>
      </div>
    </div>
  </div>
  <hr class="top_hr" >
  <div class="activityAll">
    <el-scrollbar height="520px">
      <div>
          <div v-for="item in clubActivity" class="activity">
            <div v-if="item.status === 1" class="activity1">
              <hr>
              <div class="activity2">
              <h2>活动名称：{{item.actName}}<br></h2>
                活动概述：{{item.actSummarize}}<br>
                活动详情：{{item.actParticulars}}<br>
                活动报名时间：{{item.actTime}}<br>
                活动限制人数：{{item.actPeople}}人<br>
                举办社团为：{{item.actClub}}<br>
                活动要求：{{item.actAsk}}<br>
                活动开始时间：{{item.actBeginTime}}<br><br>
                <el-button type="primary" @click="open(item.actName , item.actClub , item.status)" style="margin-left: 210px">报名参加活动</el-button>
                <el-button type="success" @click=getRewview(item.id)>去发布精彩评论</el-button>
                <hr>
              </div>
              <hr>
            </div>
          </div>
      </div>
    </el-scrollbar>
    <div class="comment">
      <div class="com_card">

         <el-card style="height: 400px ; width: 650px ; margin-left: 75px ; background-color: #cbb5e2" type="text" >
           <el-scrollbar style="height: 400px ; width: 620px">
           <div v-for="item in review">
             <div style="font-size: 1.5em ; color: #6fe5e1">{{item.sname}} : </div>
             <div style="font-size: 1.5em">{{item.content}}</div>
             <h5 style="font-weight: normal">{{item.reTime}}</h5>
             <br>
             <br>
          </div>
        </el-scrollbar>
         </el-card>

        <div v-if="nowId != null">
            <el-input
              v-model="sendReview.content"
              style="width: 650px ; margin-left: 75px ; background-color: #cbb5e2"
              :rows="5"
              type="textarea"
              placeholder="留下你精彩的评论吧,让它流入智慧校园"
            />
            <div style="display: flex ; margin-left: 595px">
              <el-button type="danger" style="" @click="clearReview()">取消</el-button>
              <el-button type="primary" style="" @click="addReview() ; clearReview()">评论</el-button>
            </div>
        </div>
      </div>
    </div>

  </div>

  <!--    报名参加活动-->

  <el-dialog v-model="tk" title="报名活动" width="500" style="text-align: center">
    <el-form :model="joinActivityForm" :rules="joinActivityFormRules">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="joinActivityForm.actName" disabled autocomplete="off"/>
      </el-form-item>
      <el-form-item label="举办社团" :label-width="formLabelWidth">
        <el-input v-model="joinActivityForm.actClub" disabled autocomplete="off"/>
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth" prop="sname">
        <el-input v-model="joinActivityForm.sname" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="班级" :label-width="formLabelWidth" prop="sclass">
        <el-input v-model="joinActivityForm.sclass" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学号" :label-width="formLabelWidth" prop="snumber">
        <el-input v-model="joinActivityForm.snumber" autocomplete="off" />
      </el-form-item>

        <div class="dialog-footer">
          <el-button @click="tk = false" >取消</el-button>
          <el-button type="primary" @click="addPeople()">
            确认
          </el-button>
        </div>

    </el-form>
  </el-dialog>

</template>

<style scoped>


.features .feature1 h3 {
  margin-bottom: 10px;
  color: white;
  font-weight: bolder;
}

.features .feature1 p {
  font-size: 0.9rem;
  /*  缩进*/
  text-indent: 2em;
  /*    行距*/
  line-height: 30px;
  font-weight: bolder;
  color: white;
}

a {
  text-decoration: none;
  color: inherit;
}

.top {
  display: flex;
}

.top-left {
  margin-left: 50px;
}

.top-right {
  margin-top: 40px;
  margin-left: 140px;
}
li {

  list-style: none;
  margin-right: 30px;
  cursor: pointer;
  color: #007bff;
  font-family: "Arial Narrow", sans-serif;
  font-size: 25px;
}
.top_hr{

  border: 5px solid rebeccapurple;
}
.activityAll{
  display: flex;
  width: 100%;
}
.activity{
  display: flex;
  height: 100%;
}
.activity1{
  display: flex;
}
.activity2{
  margin-top: 100px;
  width: 700px;
}
.comment{

}
.com_card{
  width: 700px;
  height: 700px;
}

</style>